<template>
  <main class="wss-container">
    <div class="entity-box">
      <el-row :gutter="20">
        <el-col :span="16">
          <NewCard title="项目列表" :border="false" :isright="true">
            <template slot="right">
              <ComForm
                @EventOnsubmit="tableFiltle"
                @EventReset="resetBtn"
                :list="comForm"
              ></ComForm>
            </template>

            <!-- 项目专家的列表 -->
            <el-table
              :data="entityList"
              style="width: 100%"
              highlight-current-row
              @row-click="rowClick"
              v-hasPermi="['financial:order:expertOrder']"
              v-if="isRolesShow()"
            >
              <el-table-column label="" width="35">
                <template slot-scope="scope">
                  <svg-icon icon-class="jxz_icon" v-if="scope.row.status=='3'"/>
                  <svg-icon icon-class="ywc_icon" v-else-if="scope.row.status=='0'"/>
                </template>
              </el-table-column>
              <el-table-column label="项目名称" width="250">
                <template slot-scope="scope">
                  <p>{{ scope.row.nickname }} - {{ scope.row.title }}</p>
                </template>
              </el-table-column>
              <!-- <el-table-column label="委托人" show-overflow-tooltip>
                <template slot-scope="scope">
                  <p>{{ scope.row.nickname }}</p>
                </template>
              </el-table-column> -->
              <el-table-column label="助理" width="200" show-overflow-tooltip>
                <template slot-scope="scope">
                  <!-- <div class="assistant-box">
                    <span v-for="(ass, index) in scope.row.assistants" :key="index">{{ ass.name }}<i>、</i></span>
                  </div> -->
                  <p>{{ scope.row.assistantName }}</p>
                </template>
              </el-table-column>
              <el-table-column
                label="委托时间"
                prop="createdTime"
                width="120"
                show-overflow-tooltip
                sortable
              >
                <template slot-scope="scope">
                  <!-- <p v-if="scope.row.createTime">{{scope.row.createTime.substring(0,10)}}</p> -->
                  <p v-if="scope.row.createdTime">
                    {{ getTime(scope.row.createdTime.substring(0, 10)) }} {{getDivision(scope.row.createdTime)}}
                  </p>
                </template>
              </el-table-column>
              <!-- <el-table-column label="状态">
                <template slot-scope="scope">
                  <p>{{ getStatus(scope.row.status) }}</p>
                </template>
              </el-table-column> -->
              <el-table-column label="备注" show-overflow-tooltip>
                <template slot-scope="scope">
                  <p>{{ scope.row.orderRemark }}</p>
                </template>
              </el-table-column>
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <el-button type="text" @click="editBtn(scope.row)">编辑</el-button>
                </template>
              </el-table-column>
            </el-table>
            <!-- 专家助理的列表 -->
            <el-table
              :data="entityList"
              style="width: 100%"
              highlight-current-row
              @row-click="rowClick"
              v-hasPermi="['financial:order:assistantOrder']"
              v-if="isAssistant()"
            >
              <el-table-column label="" width="50">
                <template slot-scope="scope">
                  <svg-icon icon-class="jxz_icon" v-if="scope.row.status=='3'"/>
                  <svg-icon icon-class="ywc_icon" v-else-if="scope.row.status=='0'"/>
                </template>
              </el-table-column>
              <el-table-column
                label="委托时间"
                prop="createdTime"
                width="100"
                show-overflow-tooltip
                sortable
              >
                <template slot-scope="scope">
                  <!-- <p v-if="scope.row.createTime">{{scope.row.createTime.substring(0,10)}}</p> -->
                  <p v-if="scope.row.createdTime">
                    {{ getTime(scope.row.createdTime.substring(0, 10)) }} {{getDivision(scope.row.createdTime)}}
                  </p>
                </template>
              </el-table-column>
              <el-table-column label="项目名称" width="300">
                <template slot-scope="scope">
                  <p>{{ scope.row.title }}</p>
                </template>
              </el-table-column>
              <el-table-column label="委托人" show-overflow-tooltip>
                <template slot-scope="scope">
                  <p>{{ scope.row.nickname }}</p>
                </template>
              </el-table-column>
              <el-table-column label="助理" width="200" show-overflow-tooltip>
                <template slot-scope="scope">
                  <!-- <div class="assistant-box">
                    <span v-for="(ass, index) in scope.row.assistants" :key="index">{{ ass.name }}<i>、</i></span>
                  </div> -->
                  <p>{{ scope.row.assistantName }}</p>
                </template>
              </el-table-column>
              <!-- <el-table-column label="状态">
                <template slot-scope="scope">
                  <p>{{ getStatus(scope.row.status) }}</p>
                </template>
              </el-table-column> -->
              <el-table-column label="备注" show-overflow-tooltip>
                <template slot-scope="scope">
                  <p>{{ scope.row.orderRemark }}</p>
                </template>
              </el-table-column>
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <el-button type="text" @click="editBtn(scope.row)">编辑</el-button>
                </template>
              </el-table-column>
            </el-table>

            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="pageing.pageNum"
              :page-sizes="[10, 20, 30, 40]"
              :page-size="pageing.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="pageing.total"
              v-if="isPageShow()"
            >
            </el-pagination>

            <!-- 点击编辑弹出抽屉 -->
            <el-drawer
              title="编辑项目"
              size="40%"
              :visible.sync="editDrawer"
              @close="cancelBtn"
            >
              <div class="editDrawer-box">
                <el-form
                  ref="form"
                  :model="currentEntity"
                  label-width="100px"
                  label-position="left"
                >
                  <el-form-item label="订单号">
                    <p>{{ currentEntity.orderNo }}</p>
                  </el-form-item>
                  <el-form-item label="委托时间">
                    <p>{{ currentEntity.createdTime }}</p>
                  </el-form-item>
                  <el-form-item label="项目名称">
                    <p>{{ currentEntity.title }}</p>
                  </el-form-item>
                  <el-form-item label="委托人">
                    <p>{{ currentEntity.nickname }}</p>
                  </el-form-item>
                  <el-form-item label="助理" v-if="isRolesShow()">
                    <el-select
                      v-model="currentAssList"
                      multiple
                      filterable
                      allow-create
                      default-first-option
                      @change="selectAss">
                      <p class="selectStatic">
                        助理成员 ({{ currentAssList.length }}/{{assistantList.length}})
                      </p>
                      <el-option
                        v-for="(item, index) in assistantList"
                        :key="index"
                        :label="item.nickName"
                        :value="item.id">
                        <img :src="item.avatar" v-if="item.avatar" />
                        <img src="~@/wss/assets/image/circle.png" v-else />
                        <p>{{ item.nickName }}</p>
                      </el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="备注" v-hasPermi="['financial:order:inertOrderRemark']">
                    <el-input
                      v-model="currentEntity.orderRemark"
                      placeholder="请输入..."
                    ></el-input>
                  </el-form-item>
                </el-form>
                <SubBtn>
                  <template slot="btn">
                    <el-button round @click="cancelBtn">取消</el-button>
                    <el-button type="primary" round @click="saveProject"
                      >保存</el-button
                    >
                  </template>
                </SubBtn>
              </div>
            </el-drawer>
            <!-- 点击编辑弹出抽屉 end -->

            <!-- 底部按钮 -->
            <div class="bottomBtn" v-hasPermi="['work:assistant:assistantVoList']" v-if="isRolesShow()">
              <!-- 我的助理 -->
              <div
                class="myAssistant"
                :class="bottomBtnShow == false ? 'isActive' : ''"
              >
                <h3>我的助理（{{ assistantList.length }}）</h3>
                <div class="myAss-box">
                  <div
                    class="swiper-container"
                    ref="swiper"
                  >
                    <div class="swiper-wrapper">
                      <div
                        class="swiper-slide"
                        v-for="tag in assistantList"
                        :key="tag.id"
                      >
                        <el-tag closable @close="handleClose(tag)">
                          <img :src="tag.avatar" v-if="tag.avatar" />
                          <img src="~@/wss/assets/image/circle.png" v-else />
                          <p>
                            {{ tag.nickName }} <span>{{ tag.phone }}</span>
                          </p>
                        </el-tag>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="sw-pagination">
                  <div class="swiper-button-prev"></div>
                  <div class="swiper-pagination" id="sw-pagination"></div>
                  <div class="swiper-button-next"></div>
                </div>
              </div>
              <el-button @click="clickbBtn" v-show="bottomBtnShow"
                >+添加助理</el-button
              >
              <div class="addAss-box" v-show="bottomBtnShow == false">
                <!-- 输入框和按钮 -->
                <div class="addAss-btn">
                  <el-input
                    v-model="bottomBtnValue"
                    @keyup.enter.native="addMaterials"
                    placeholder="输入手机号添加助理"
                    ref="bottBtn"
                  >
                  </el-input>
                  <el-button
                    type="primary"
                    round
                    @click="addMaterials"
                    v-hasPermi="['work:assistant:inviteJoin']"
                    >确定</el-button
                  >
                  <el-button round @click="bottomBtnShow = true"
                    >取消</el-button
                  >
                </div>
              </div>
            </div>
          </NewCard>
        </el-col>

        <!-- 条件评估/项目需求/流程状态 模块 -->
        <el-col :span="8">
          <Tab :selectRow="selectRow"></Tab>
        </el-col>
      </el-row>
    </div>
  </main>
</template>

<script>
//引入Swiper
import Swiper from "swiper";
import "swiper/css/swiper.css";

import NewCard from "@/wss/components/newCard.vue";
import SubBtn from "@/wss/components/subBtn.vue";
import ComForm from "@/wss/components/comForm.vue";
import Tab from "./tab/index.vue";

import { getProjectTypelistApi } from "@/wss/newApi_3-24/work/projectType.js";
import {
  getProjectListApi,
  getExpertOrderListApi,
  getOrderAssistantOrderApi,
  editProjectApi,
  getAssistanListApi,
  addAssistantApi,
  removeAssistantApi,
  addInertOrderRemarkApi,
  editInertOrderRemarkApi
} from "@/wss/newApi_3-24/doc/project.js";
import { getExpertListApi } from "@/BMViews/api/work/expert.js";

export default {
  name: "Project",
  components: { NewCard, SubBtn, ComForm, Tab },
  data() {
    return {
      // 表单配置
      comForm: {
        modes: [
          {
            mode: "title",
            formType: "input",
            placeholder: "项目名称",
          },
          {
            mode: "nickname",
            formType: "input",
            placeholder: "委托人",
          },
        ],
      },

      // 分页参数
      pageing: {
        pageNum: 1,
        pageSize: 10,
        total: 0,
        sort: "DESC",
        order: "createdTime",
      },

      typeList: [], //项目类型数据
      entityList: [], // 项目列表
      entityListFiler: [], //项目过滤
      //点击编辑的按钮
      editDrawer: false,
      //当前点击的项目
      currentEntity: {},
      temProject: [], // 暂存的项目
      selectRow: {}, // 当前选择的某一行数据

      // 助理列表
      assistantList: [],
      currentAssList: [], //当前抽屉选中的助理手机号列表

      nowExpertInfo: {}, //当前专家的信息

      bottomBtnShow: true, //底部按钮
      bottomBtnValue: "", //底部输入值
    };
  },
  async mounted() {
    if(this.$store.state.user.roles.includes('xmzj')){
      this.getExpertOrderList(); // 获取项目列表的数据
    }else if(this.$store.state.user.roles.includes('zjzl')){
      this.getOrderAssistantOrder() //获取项目助理列表数据
    }
    await this.getExpertList(); //获取专家列表

    // 有专家数据才能发助理请求
    if(this.nowExpertInfo){
      this.getAssistanList(); //获取专家助理的数据
    }

    // 重新获取项目列表的信息
    this.$bus.$on("againProjectList", () => {
      if(this.$store.state.user.roles.includes('xmzj')){
        this.getExpertOrderList(); // 获取项目列表的数据
      }else if(this.$store.state.user.roles.includes('zjzl')){
        this.getOrderAssistantOrder() //获取项目助理列表数据
      }
    });
  },
  methods: {
    
    // 判断当前项目列表是否展示 根据角色
    isRolesShow(){
      let roles = this.$store.state.user.roles
      if(roles.includes('admin') || roles.includes('xmzj')){
        return true
      }else{
        return false
      }
    },

    // 判断当前项目列表是否展示 根据角色
    isPageShow(){
      let roles = this.$store.state.user.roles
      if(roles.includes('admin') || roles.includes('xmzj') || roles.includes('zjzl')){
        return true
      }else{
        return false
      }
    },

    // 当前是助理
    isAssistant(){
      let roles = this.$store.state.user.roles
      if(roles.includes('zjzl')){
        return true
      }else{
        return false
      }
    },

    // 分页器
    handleSizeChange(val) {
      this.pageing.pageSize = val;
      if(this.$store.state.user.roles.includes('xmzj')){
        this.getExpertOrderList(); // 获取项目列表的数据
      }else if(this.$store.state.user.roles.includes('zjzl')){
        this.getOrderAssistantOrder() //获取项目助理列表数据
      }
    },
    handleCurrentChange(val) {
      this.pageing.pageNum = val;
      if(this.$store.state.user.roles.includes('xmzj')){
        this.getExpertOrderList(); // 获取项目列表的数据
      }else if(this.$store.state.user.roles.includes('zjzl')){
        this.getOrderAssistantOrder() //获取项目助理列表数据
      }
    },
    // 分页器 end

    // 筛选表格数据 项目列表
    tableFiltle(arr) {
      // let [{ title = "" }, { createName = "" }] = arr;
      // const entityList = this.entityListFiler;
      // this.entityList = entityList.filter((item) => {
      //   return (
      //     item?.title?.includes(title) && item?.createName?.includes(createName)
      //   );
      // });
      let [{ title = "" }, { nickname = "" }] = arr
      if(this.$store.state.user.roles.includes('xmzj')){
        this.getExpertOrderList(title,nickname); // 获取项目列表的数据
      }else if(this.$store.state.user.roles.includes('zjzl')){
        this.getOrderAssistantOrder(title,nickname) //获取项目助理列表数据
      }
    },

    // 重设按钮的回调
    resetBtn() {
      // 还原之前的数据
      this.entityList = JSON.parse(JSON.stringify(this.entityListFiler));
    },

    // 获取当前专家下的所有项目列表
    async getExpertOrderList(title,nickname) {
      let type = 6;
      let { pageNum, pageSize, sort, order } = this.pageing;
      let result = await getExpertOrderListApi({
        pageNum,
        pageSize,
        type,
        title,
        nickname
      });
      if (result.code == 200) {
        this.pageing.total = result.total;
        //所有项目列表
        this.entityList = result.rows;
        this.entityListFiler = JSON.parse(JSON.stringify(result.rows));
        //默认是表格的第一条
        // this.selectRow = result.rows[0];
      }
    },

    // 获取当前专家助理下的所有项目列表
    async getOrderAssistantOrder(title,nickname){
      let { pageNum, pageSize, sort, order } = this.pageing;
      let result = await getOrderAssistantOrderApi({
        pageNum,
        pageSize,
        title,
        nickname
      })
      if (result.code == 200) {
        this.pageing.total = result.total;
        //所有项目列表
        this.entityList = result.rows;
        this.entityListFiler = JSON.parse(JSON.stringify(result.rows));
        //默认是表格的第一条
        // this.selectRow = result.rows[0];
      }
    },

    // 获取项目列表的数据
    // async getProjectList() {
    //   let { pageNum, pageSize, sort, order } = this.pageing;
    //   let result = await getProjectListApi({ pageNum, pageSize, sort, order });
    //   if (result.code == 200) {
    //     this.pageing.total = result.data.total;
    //     //所有项目列表
    //     this.entityList = result.data.rows;
    //     this.entityListFiler = JSON.parse(JSON.stringify(result.data.rows));
    //     //默认是表格的第一条
    //     this.selectRow = result.data.rows[0];
    //   }
    // },

    // 获取预计完成时间*********
    getTime(days) {
      let arr = days.split("-");
      return arr[0].slice(2) + arr[1] + arr[2];
    },
    // 获取 时 分
    getDivision(time){
      return time.split(" ")[1].substring(0, 5)
    },
    // 获取预计完成时间*********end

    // 获取当前项目的状态
    getStatus(status) {
      // 项目状态 0已完成 1未开始 2进行中 -1已关闭
      // 订单状态 -1已关闭 0已完成 1未支付 2已支付 3进行中
      if (status == "0") {
        return "已完成";
      } else if (status == "1") {
        return "未支付";
      } else if (status == "2") {
        return "已支付";
      } else if (status == "3") {
        return "进行中";
      } else if (status == "-1") {
        return "已关闭";
      }
    },

    //点击编辑项目
    editBtn(row) {
      //显示抽屉
      this.editDrawer = true;
      // 添加一个响应式的备注
      this.$set(row, "remark", row.remark);
      
      row.assistants = [] //添加项目助理数组
      if (row.assistantId) {
        let arr = row.assistantId.split(',').filter(_=>_)
        arr.forEach((item,i)=>{
          // 找到avatar\id\expertId\nickName\phone\userId
          let nowItem = this.assistantList.find(k=>{
            return k.userId == item
          })
          // 如果获取到的话就放进去
          if(nowItem){
            nowItem.name = nowItem.nickName
            nowItem.userid = nowItem.userId
            row.assistants.push(nowItem)
            //渲染编辑项目的多选框
            this.currentAssList.push(nowItem.id);
          }
        })
      }

      //当前选中的一行赋值给currentEntity
      this.currentEntity = row;
      // 暂存的数据
      this.temProject = JSON.parse(JSON.stringify(row));
    },

    // 抽屉点击保存
    async saveProject() {
      await this.editProject(); // 编辑项目
      await this.addInertOrderRemark() //添加备注的接口
      setTimeout(async () => {
        if(this.$store.state.user.roles.includes('xmzj')){
          this.getExpertOrderList(); // 重新获取项目列表的数据
        }else if(this.$store.state.user.roles.includes('zjzl')){
          this.getOrderAssistantOrder() //重新获取项目助理列表数据
        }
      }, 500);
      // 关闭当前抽屉
      this.editDrawer = false;
    },

    //点击取消按钮
    cancelBtn() {
      //隐藏抽屉
      this.editDrawer = false;
      // 还原暂存的数据
      this.currentEntity = JSON.parse(JSON.stringify(this.temProject));

      // 清除当前点击的项目
      this.currentEntity = {};
      this.temProject = {};
      this.currentAssList = [];
    },

    // 编辑项目
    async editProject() {
      let project = {
        id: this.currentEntity.goodsId,
        // remark: this.currentEntity.remark,
        assistants: this.currentEntity.assistants || [],
      };
      let result = await editProjectApi(project);
      if (result.code == 200) {
        this.$message({ type: "success", message: "编辑成功！" });
      }
    },

    // 添加备注的接口
    async addInertOrderRemark(){
      let data = {
        orderId: this.currentEntity.id,
        remark: this.currentEntity.orderRemark,
        userType: this.$store.state.user.userType
      }
      let result = await addInertOrderRemarkApi(data)
      if (result.code != 200) return
    },

    // 点击某一行的时候
    rowClick(row) {
      this.selectRow = row;
    },

    // **************助理**************
    // 点击添加助理
    clickbBtn() {
      //显示输入框
      this.bottomBtnShow = false;
      //输入框自动获取焦点
      this.$nextTick(() => {
        this.$refs.bottBtn.focus();
      });
    },

    // ****************************************专家助理****************************************
    // 获取专家列表
    async getExpertList() {
      let { pageNum, pageSize } = this.pageing;
      pageSize = 200;
      let result = await getExpertListApi({ pageNum, pageSize });
      if (result.code == 200) {
        // nowExpertInfo
        this.nowExpertInfo = result.rows.find((item) => {
          return item.userId == this.$store.state.user.userId;
        });
      }
    },

    // 获取专家助理列表
    async getAssistanList() {
      let expertId = this.nowExpertInfo.id;
      let result = await getAssistanListApi({ expertId });
      if (result.code == 200) {
        this.assistantList = result.rows;
      }
    },

    // 添加专家助理
    async addAssistant(phone) {
      let result = await addAssistantApi({ phone });
      if (result.code == 200) {
        this.$message({ type: "success", message: "添加成功!" });
      }
    },

    // 点击添加专家助理按钮/输入框按回车的回调
    async addMaterials() {
      let phoneReg = /^[1][3,4,5,7,8][0-9]{9}$/; //手机号正则
      if (this.bottomBtnValue) {
        if (phoneReg.test(this.bottomBtnValue)) {
          //隐藏输入框
          // this.bottomBtnShow = true
          await this.addAssistant(this.bottomBtnValue); // 添加专家助理
          this.getAssistanList(); // 重新获取专家助理列表
          this.bottomBtnValue = "";
        } else {
          this.$message({ type: "warning", message: "请输入正确的手机号！" });
        }
      } else {
        this.$message({ type: "warning", message: "请输入手机号！" });
      }
    },

    // 点击删除按钮的回调
    handleClose(tag) {
      let this_ = this;
      this_
        .$confirm("此操作将删除该助理, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
        .then(async () => {
          let expertId = tag.expertId;
          let userId = tag.userId;
          await this_.removeAssistant(expertId, userId);
          this.getAssistanList(); // 重新获取专家助理列表
        })
        .catch(() => {});
    },

    // 删除助理
    async removeAssistant(expertId, userId) {
      let result = await removeAssistantApi(expertId, userId);
      if (result.code == 200) {
        this.$message({ type: "success", message: "删除成功!" });
      }
    },

    // 编辑项目里面选择助理
    async selectAss(list) {
      let newArr = [];
      list.forEach((item) => {
        let ass = this.assistantList.find((k) => k.id == item);
        newArr.push(ass);
      });
      // 循环添加id、name、userid
      newArr.forEach((item) => {
        item.name = item.nickName;
        item.id = item.id;
        item.userid = item.userId;
      });
      this.currentEntity.assistants = newArr;
      // this.$set(this.currentEntity,'assistants',this.selectAssistants)
    },
    // ****************************************专家助理****************************************end
  },

  watch: {
    // 专家助理swiper滚动
    assistantList: {
      //监听属性：立即监听，不管属性有没有发生变化，立即执行一次。
      immediate: true,
      handler() {
        //监听到属性变化，立即初始化swiper实例
        this.$nextTick(() => {
          new Swiper(this.$refs.swiper, {
            slidesPerView: 5,
            spaceBetween: 10,
            pagination: {
              el: "#sw-pagination",
              clickable: true,
              renderBullet: function (index, className) {
                return (
                  '<span class="' + className + '">' + (index + 1) + "</span>"
                );
              },
            },
            navigation: {
              nextEl: ".sw-pagination .swiper-button-next",
              prevEl: ".sw-pagination .swiper-button-prev",
            },
          });
        });
      },
    },
  },
};
</script>

<style scoped>
h3,
p,
ul,
li {
  margin: 0;
  padding: 0;
}

.wss-container {
  display: flex;
  flex-direction: column;
}

.entity-box {
  height: 100%;
}
.entity-box .el-row {
  height: 100%;
  margin-bottom: 0;
}
.entity-box .el-col,
.entity-box .el-card {
  height: 100%;
}
.entity-box .el-card {
  position: relative;
}
.entity-box >>> .el-card__body {
  height: 100%;
}
.entity-box >>> .el-card__body > div {
  height: 92%;
  overflow-y: auto;
}
.entity-box >>> .el-card__body > div::-webkit-scrollbar {
  width: 0;
}

/* 表格样式 */
.el-table {
}
::v-deep .el-table .el-table__header-wrapper th {
  background-color: #fff;
}
::v-deep .el-table th.is-leaf {
  border-top: 1px solid #efefef;
  border-bottom: 1px solid #efefef;
}
::v-deep .el-table th > .cell {
  font-size: 12px;
  color: #909aaa;
}
::v-deep .el-table .cell,
::v-deep .el-table .cell p {
  margin: 0;
  font-size: 14px;
  color: #2e3f5e;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
}
::v-deep .el-table .cell .el-button {
  color: #f87a23;
}
::v-deep .el-table .cell .el-table__expand-icon i::before {
  content: "\E791";
}
::v-deep .el-table td {
  padding: 5px 0;
  /* border-bottom: 0; */
}
::v-deep .el-table tr.current-row td{
  background-color: #ebecf0;
}
::v-deep .el-table .el-table__expanded-cell[class*="cell"] {
  padding: 0;
}
::v-deep .el-table__expanded-cell .el-table::before {
  height: 0;
}
::v-deep .el-table__expanded-cell .el-table th.is-leaf {
  border-top: 0;
}
::v-deep .el-table__expanded-cell .el-table td {
  border-bottom: 0;
}
.assistant-box span:last-child > i {
  display: none;
}

.addList {
  padding: 15px 0;
  margin: 0;
  margin-left: 60px;
}
.addList > i {
  cursor: pointer;
  border: 1px solid #909aaa;
  font-size: 12px;
}

.el-pagination {
  margin-top: 30px;
  margin-bottom: 80px;
  text-align: center;
}
/* 表格样式 end */

/* 编辑项目抽屉样式 */
::v-deep .entity-box .el-drawer__header {
  border-bottom: 1px solid #efefef;
  padding-bottom: 15px;
  margin-bottom: 20px;
}
::v-deep .entity-box .el-drawer__header > span {
  font-size: 18px;
  font-weight: bold;
  color: #2e3f5e;
  padding-left: 20px;
  background: url("~@/wss/assets/image/icon/cardLeft.png") left center no-repeat;
  background-size: 7px;
}

.selectStatic {
  padding: 10px 15px;
  font-size: 14px;
  font-weight: 400;
  color: #2e3f5e;
}

.editDrawer-box {
  padding: 0 20px;
}
::v-deep .editDrawer-box .el-form-item__label,
::v-deep .editDrawer-box .el-form-item__content p {
  color: #2e3f5e;
}

.editDrawer-box .el-select {
  width: 100%;
}
.el-scrollbar .el-select-dropdown__item {
  display: flex;
  align-items: center;
  margin: 10px;
}
.el-scrollbar .el-select-dropdown__item > img {
  width: 30px;
  height: 30px;
  margin-right: 10px;
  border-radius: 50%;
  object-fit: cover;
}
.el-scrollbar .el-select-dropdown__item > p {
  color: #2e3f5e;
}
.el-scrollbar .el-select-dropdown__item.selected > p {
  color: #2e3f5e;
  font-weight: 400;
}
.el-scrollbar .el-select-dropdown__item::after {
  content: "\E6DA";
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  right: 20px;
  width: 19px;
  height: 19px;
  color: #fff;
  border: 1px solid #e4e7ed;
  border-radius: 50%;
}
.el-scrollbar .el-select-dropdown__item.selected::after {
  border-color: #f87a23;
  background-color: #f87a23;
}

/* 编辑项目抽屉样式 end*/

/* 添加按钮 */
.bottomBtn {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #f8f8f8;
  border-top: 1px solid #ecedf0;
  z-index: 99;
}
.bottomBtn > .el-button {
  width: 100%;
  border: 0;
  border-top: 1px solid #ecedf0;
  background-color: #f8f8f8;
  line-height: 25px;
  color: #606e84;
}

.addAss-box {
  padding: 15px 30px;
}
::v-deep .bottomBtn .el-input .el-input__inner {
  height: 46px;
  line-height: 46px;
}

.myAssistant {
  position: relative;
  height: 0;
  overflow: hidden;
}
.myAssistant.isActive {
  height: auto;
}
.myAssistant h3 {
  padding: 20px 30px 0;
  font-size: 18px;
  font-weight: 600;
  color: #2e405e;
  margin-bottom: 20px;
}

.myAssistant .sw-pagination {
  position: absolute;
  top: 15px;
  right: 40px;
  display: flex;
}
.myAssistant .sw-pagination .swiper-pagination {
  display: flex;
  position: initial;
}
.myAssistant .sw-pagination >>> .swiper-pagination-bullet {
  display: block;
  background-color: transparent;
  margin: 0 5px;
  width: 10px;
  height: 22px;
  font-size: 14px;
}
.myAssistant .sw-pagination .swiper-button-prev,
.myAssistant .sw-pagination .swiper-button-next {
  position: initial;
  color: #2e405e;
  height: 22px;
  margin-top: -2px;
}
.myAssistant .sw-pagination .swiper-button-prev::after,
.myAssistant .sw-pagination .swiper-button-next::after {
  font-size: 12px;
}

.addAss-btn {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}
.addAss-btn .el-input {
  width: 80%;
}
.addAss-btn .el-button {
  width: 9%;
  height: 34px;
  padding: 0;
  margin-left: 0;
  border-radius: 30px;
}
.addAss-btn .el-button.el-button--primary {
  background-color: #f87a23;
  border-color: #f87a23;
}

.myAss-box {
  width: 100%;
  overflow-x: auto;
  /* margin-bottom: 20px; */
}
.myAss-box .swiper-slide {
  background-color: #f1f1f1;
}
.myAss-box .el-tag {
  position: relative;
  display: flex;
  height: 70px;
  width: 100%;
  padding: 10px 20px;
  border: 0;
  background-color: transparent;
  color: #2e3f5e;
  font-weight: bold;
  font-size: 14px;
}
.myAss-box .el-tag img {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  margin-right: 10px;
}
.myAss-box .el-tag p > span {
  display: block;
  font-size: 12px;
  font-weight: 400;
  color: #909aaa;
}
::v-deep .myAss-box .el-tag i {
  position: absolute;
  right: 15px;
  top: 10px;
  color: #909aaa;
}
::v-deep .myAss-box .el-tag i:hover {
  background-color: #f87a23;
  color: #fff;
}

.swiper-container {
  position: relative;
  margin: 0 30px;
}
.swiper-container > i {
  position: absolute;
  right: 10px;
  top: 10px;
  z-index: 999;
  cursor: pointer;
  opacity: 0.3;
}
.swiper-container img {
  width: 100%;
  object-fit: cover;
  border-radius: 10px;
}
.swiper-container >>> .swiper-pagination-bullet {
  width: 20px;
  height: 4px;
  border-radius: 4px;
  background-color: #fff;
  opacity: 1;
}
.swiper-container >>> .swiper-pagination-bullet-active {
  background-color: #f87a23;
}
/* 添加按钮end */

/* 右侧按钮样式 */
::v-deep .subBtn {
  padding: 8px 30px !important;
  z-index: 99;
}
::v-deep .subBtn > .el-button {
  width: 100px;
  padding: 8px 0 !important;
  font-size: 14px;
  color: #606e84;
}
::v-deep .subBtn > .el-button.el-button--primary {
  background-color: #f87a23;
  border-color: #f87a23;
  color: #fff;
}

@media (max-width: 1180px) {
  .entity-box >>> .top .left h1 > img {
    display: none;
  }
}
</style>